<template>
  <div>
     <!-- 轮播 -->
     <div class="h-bannerd">

     </div>

        <!---->
        <div class="car-main-content">
          <div class="container-1200">
                      <div class="wy-main-title" style="margin-top:40px;"><p >首页 / <span>城市物流</span></p></div>
          </div>
          <div class="retailers_bg">
            <div class="container-1200">
                 <!--城市切换-->
            <!-- <a-tabs > -->
              <!-- <a-tab-pane tab="精选电商" key="1" > -->
                 <ul style="overflow:hidden" >
                    <li class="retailers_li" v-for="(item,index) in list" :key="index">
                    <router-link :to="{path:`/special/${item.dictOrder}`,query: {name: item.dictKey}}">
                       <div>
                         <h2>{{toDouble(item.dictOrder)}}</h2>
                         <p>{{item.dictValue}}</p>
                         <span>{{item.dictValueEn}}</span>
                       </div>
                       <img :src="item.icoUrl" alt="">
                    </router-link>
                    </li>
<!--                     <li class="retailers_li">
                    <nuxt-link to="./02">
                    <div>
                         <h2>02</h2>
                         <p>宠物运输</p>
                         <span>Pet Handling</span>
                       </div>
                     <img src="../../static/img/special/chongwu.png" alt="">
                    </nuxt-link>
                    </li>
                    <li class="retailers_li">
                    <nuxt-link to="./03">
                    <div>
                         <h2>03</h2>
                         <p>同城搬家</p>
                         <span>Moving In The Same City</span>
                       </div>
                     <img src="../../static/img/special/banyun.png" alt="">
                     </nuxt-link>
                    </li>
                    <li class="retailers_li">
                    <nuxt-link to="./04">
                    <div>
                         <h2>04</h2>
                         <p>家电搬运</p>
                         <span>Home Appliance Handling</span>
                       </div>
                      <img src="../../static/img/special/jiadian.png" alt="">
                    </nuxt-link>
                    </li>
                    <li class="retailers_li">
                    <nuxt-link to="./05">
                    <div>
                         <h2>05</h2>
                         <p>展会搬运</p>
                         <span>Exhibition Handling</span>
                       </div>
                       <img src="../../static/img/special/zhanhui.png" alt="">
                    </nuxt-link>
                    </li>
                    <li class="retailers_li">
                    <nuxt-link to="./06">
                      <div>
                         <h2>06</h2>
                         <p>大件运送</p>
                         <span>Exhibition Handling</span>
                       </div>
                       <img src="../../static/img/special/dajian.png" alt="">
                    </nuxt-link>
                    </li> -->
                 </ul>
            </div>
          </div>
          <div style="background:#f6f6f6; margin-bottom: -30px">
             <ul class="retailers_ad" style="width:1200px;overflow:hidden;margin:0 auto;"> 
                <li class="wy-m-r-20 zp-fl"><nuxt-link to="../corp"><img src="../../static/img/special/car1.jpg" alt=""></nuxt-link></li>
                <li class="wy-m-r-20 zp-fl"><nuxt-link to="../corp"><img src="../../static/img/special/car2.jpg" alt=""></nuxt-link></li>
                <li class="wy-m-r-20 zp-fl"><nuxt-link to="../corp"><img src="../../static/img/special/car3.jpg" alt=""></nuxt-link></li>
                <li class="wy-m-r-20 zp-fl"><nuxt-link to="../corp"><img src="../../static/img/special/car4.jpg" alt=""></nuxt-link></li>
                <li class="zp-fl"><nuxt-link to="../corp"><img src="../../static/img/special/car5.jpg" alt=""></nuxt-link></li>
             </ul>
          </div>

   
         
           



          
           

        </div>
  </div>
</template>
<script>

export default {
  data(){
    return {
      list:[]
    }
  },
    created(){
      this.infoCommonDict(35);
    },
    methods:{
            // 字典表接口 
      async infoCommonDict (type) {
          const res = await this.$store.dispatch('infoCommonDict',{
            dictType: type,
            pageSize: 99,
            pageIndex: 1
          })
          if (res.status) {
            switch(type){
              case 35: 
                this.list = res.data.rows; 

                break;
            }
          }
      },
      toDouble(str){
       return str.length>=2?str:'0'+str
      }
    }
  }
</script>
<style lang="scss" scoped>
@import "../../assets/css/index/index.scss";
@import "../../assets/css/special/dianshang.scss";
.retailers_bg{

   .ant-tabs-ink-bar{
      background-color:red;
   
  }
  .ant-tabs-nav .ant-tabs-tab-active{
    color:red !important;
}
.ant-tabs-nav .ant-tabs-tab:hover{
   color:red;
}
    
}

.retailers_bg{
   padding:0px 20px;
   padding-top:30px;
   // padding-bottom:20px;
}


.retailers_li{
   width: 380px;
   height: 200px;
   margin-bottom: 30px;
   position: relative;
   float:left;
   margin-left: 30px;
   img{
      width: auto;
      height: auto;

   }
   p{
       text-align:center;
       margin-top: 10px;
       margin-bottom: 10px;
   }
   div{

    position:absolute;
    left: 20px;
    top:40px;
    cursor: pointer;
        h2{
          width:26px;
          height:22px;
          font-size:22px;
          font-weight:600;
          color:rgba(30,161,150,1);
       }
       p{
          width:80px;
          height:19px;
          font-size:20px;
          font-weight:400;
          color:rgba(30,161,150,1);
          margin-top: 23px;
       }

       span{
          width:85px;
          height:13px;
          font-size:12px;
          font-weight:400;
          color:rgba(30,161,150,1);
          opacity:0.6;
       }

   }
}
.retailers_li:nth-child(3n+1){
  margin-left: 0;
}
.retailers_ad{
    margin: 0;
    padding-bottom: 20px;
      padding-top:20px;
    background-color:#F6F6F6;
   li{
      width:220px;
      height:180px;
      margin-right: 25px;
      img{
         width: 100%;
         height: 100%;
      }
   }
   li:last-child{
    margin-right: 0;
   }
}
.h-bannerd{
  width: 100%;
  height: 500px;
  background: url('~static/img/special/chengshi.jpg') center top / cover no-repeat;
}
</style>